<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>other</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background: skyblue;
      margin-bottom: 20px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <script>
    /**
     *  手机输入框弹起
     * 
     */

    /**
      闭包取i
    */
    var oBox = document.getElementsByClassName("box")
    //利用闭包 内容会存储在 函数[[Scopes]]下的Closure中
    // 方法一 
    for (var i = 0; i < oBox.length; i++) {
      let a = i
      oBox[i].onclick = function () {
        console.log(a)
      }
    }
    //方法二
    for (var i = 0; i < oBox.length; i++) {
      (function (a) {
        oBox[i].onclick = function () {
          console.dir(this.onclick)
          console.log(a)
        }
      })(i)
    }
    // // 直接存储 利用this
    for (var i = 0; i < oBox.length; i++) {
      oBox[i].a = i
      oBox[i].onclick = function () {
        console.log(this.a)
      }
    }


    /**
     * 
     * jQuery.extend 和 jQuery.fn.extend的异同
     * 
     * //首先需了解
     *  jQuery.fn === jQuery.prototype
     *  jQuery.fn === $(".box").__proto__
     * 
     * extend 方法给本身this添加对应属性方法
     * 
     * jQuery.fn.extend(object);    
     * // 因为 jQuery.fn === jQuery.prototype
     * //所以相当于给jQuery实例对象添加方法，
     * //添加到了jQuery.prototype（可继承）
     * 
     * 
     * jQuery.extend(object); 
     * //为扩展jQuery类本身.为类添加新的方法。添加到了jQuery （不可继承）
     * 
     */
    /**
     * jQuery的无new构造，以及jQuery.fn
     * 
     * **/
    var jQuery = function (obj) {
      return new jQuery.prototype.init(obj); //进入函数返回 init函数的实例
    };
    jQuery.fn = jQuery.prototype; //将jQuery.fn 指向 jQuery.prototype 
    jQuery.prototype.init = function (obj) {}; //在 prototype 下创建 init函数 
    jQuery.prototype.init.prototype = jQuery.prototype; //将jQuery的prototype 赋值到 init函数的 prototype;

    /**
     * 修改 node_modules 里的文件
     * 
     * 利用webpack和别名设置
     * resolve:{ //设置别名
     *     alias: {
     *         '@': path.resolve('src')//@指向src目录
     *     }
     * },
     * 
     *  1.将要修改的文件复制到src中
     *  2.该文件内部引入的相对路径修改为绝对路径
     *  3.设置别名，将该文件的相对路径设置为绝对路径
     *  例如 alias: {
     *        './patchers':resolve(__dirname, 'src/assets/patchers.js')
     *      }
     * 
     * **/
  </script>
</body>

</html>